// 版本 V1.1.0 2022-1-16 之前没有版本标注，从此开始建立版本
// （1）图层显示隐藏功能
// （2）图层移除功能 
// （3）拖拽手柄功能完善


import logo from './logo.svg';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'rc-color-picker/assets/index.css';
import './App.css';

import LayersManagePanel from './panels/LayersManagePanel';
import MapPanel from './panels/MapPanel';
import MainToolbarPanel from './panels/MainToolbarPanel';
import ResourcesPanel from './panels/ResourcesPanel';
import DateSelectPanel from './panels/DateSelectPanel';
import React, { useState, useEffect } from 'react';
import dayjs from 'dayjs';
import proj4 from 'proj4' ;
import {get as getProjection} from 'ol/proj.js' ;
import {register } from 'ol/proj/proj4.js' ;


import DialogSelectStyle from './dialogs/DialogSelectStyle';
import DialogSelectRoi from './dialogs/DialogSelectRoi';
import DialogSimpleSDUI from './dialogs/DialogSimpleSDUI';
import DialogSimpleExport from './dialogs/DialogSimpleExport';
import DialogSimpleStatistic from './dialogs/DialogSimpleStatistic';
import DialogSimpleComposite from './dialogs/DialogSimpleComposite';//2022-4-4
import DialogSimpleSerialAnalyse from './dialogs/DialogSimpleSerialAnalyse';//2022-4-4
import DialogSimpleOfftaskResult from './dialogs/DialogSimpleOfftaskResult';//2022-4-7
import DialogSimpleOmc from './dialogs/DialogSimpleOmc';
import DialogSimpleScriptEditor from './dialogs/DialogSimpleScriptEditor';
import DialogTemplate from './dialogs/DialogTemplate' ;
import DialogGotsResultDialog from './dialogs/DialogGotsResultDialog';

import "react-datepicker/dist/react-datepicker.css";
import DialogLarge from './dialogs/DialogLarge';
import DialogLargeOmc from './dialogs/DialogLargeOmc';

//2022-4-6
import Login from './components/Login';
import cookie from 'react-cookies';



// global.g_version = "v1.0.0";//2022-2-5 第一次给版本号
// global.g_version = "v1.0.1";//2022-2-7 
// global.g_version = "v1.0.2";//2022-2-8 完善SDUI 
// global.g_version = "v1.0.3";//2022-2-12 export data function
// global.g_version = "v1.0.4.0";//2022-4-4 数据合成，区域统计，序列分析
// global.g_version = "v1.0.5.0";//2022-4-5
// global.g_version = "v1.0.5.0r";//2022-4-9
// global.g_version = "v1.0.5.0r-tx0";//2022-4-10 腾讯云
// global.g_version = "v1.0.6.0"; //2022-4-18 增加在线作图跳转接口
// global.g_version = "v1.0.6.0-tx0"; //2022-4-25 tx 腾讯云
// global.g_version = "v1.0.6.0r-qh"; //2022-4-26 qh 气候中心
// global.g_version = "v1.0.7.0"; //2022-4-28 resource panel bugfixed.
// global.g_version = "v1.0.7.0r";
// global.g_version = "v1.0.7.0r-tx";
// global.g_version = "v1.1.1.0";
// global.g_version = "v1.1.1.0t-qh";
// global.g_version = "v1.1.1.2";
// global.g_version = "v1.1.1.r deprecated"; //使用r表示进行release build后续修改需要增加版本号。
// 增加在线编码对话框，产品分类，
// 1.1.0.1 增加产品单元格容器垂直拖动条
// 1.1.0.2 脚本编辑器 2022-5-15
// 1.1.1.0 探针工具 2022-5-17
// v1.1.1.0t-qh 气候中心临时版本，后面使用r版本替换 2022-5-17
// v1.1.1.1 pin加上了。
// v1.1.1.2 增加直接打开在线作图按钮。
// v1.1.1.r release build 2022-5-19
// v1.1.1.r 这个版本不行，关于styleid还需要修改。这个版本没有部署。
// global.g_version = "v1.1.2.0";
// // v1.1.2.0 前端显示styleid编号，pes加载默认styleid
// global.g_version = "v1.1.2.r"; 
// global.g_version = "v1.1.2.r-qh";//2022-5-19 
// global.g_version = "v1.1.3.0";
// //2022-5-19  修复我的脚本只能加载一个bug，加载脚本内容使用api
// // SDUI slider增加number text box
// // 使用table布局SDUI
// global.g_version = "v1.1.3.r";//release 2022-5-19
// global.g_version = "v1.1.3.r-qh";//release 2022-5-19
// global.g_version = "v1.1.3.r-tx";//release 2022-5-20
// global.g_version = "v1.1.4.0";//2022-5-26 制图模板
// global.g_version = "v1.1.4.1";//2022-5-31 commit
// global.g_version = "v1.1.4.r";//2022-6-9
// // 2022-7-3 增加登录错误提示
// global.g_version = "v1.1.5.0";//2022-7-3 commited
// //2022-7-10 增加图层信息，增加loginfo
// global.g_version = "v1.1.6.1";
// global.g_version = "v1.1.6.1-qh"; //2022-7-15
//2022-7-17 修改地图没有更新datetime的bug；增加pgm产品。
//2022-7-19 把生成日志放在图层面板里面，不放在APP里面 
//global.g_version = "v1.2.0.3-qh";
//global.g_version = "v1.2.0.3-wx"; // 2022-7-20
//2022-7-21 add xyz layer
//global.g_version = "v1.2.1.0"; 
//global.g_version = "v1.2.1.0-wx"; 
//global.g_version = "v1.2.2.0"; // 2022-7-21 bugfixed 修改配色方案a为65535
//global.g_version = "v1.2.2.2r";//2022-7-22 跳转omc时候附带当前A图层组时间 commited
// global.g_version = "v1.2.2.2r-qh";//2022-7-22
//global.g_version = "v1.2.3.1";//2022-7-23 脚本最大20k
//global.g_version = "v1.2.4.0";//2022-7-26 脚本产品导出失败,去掉全部datetimeobj相关代码
//global.g_version = "v1.2.4.0-wx";
//global.g_version = "v1.2.4.0-qh";
//1.区域统计sdui bugfix
//global.g_version = "v1.2.5.1";//2022-7-27
//global.g_version = "v1.2.5.1-wx";//2022-7-27
//global.g_version = "v1.2.5.1-qh";//2022-7-28
//1.新的对话框
// global.g_version = "v1.3.0.0";//2022-7-30 not finished
// global.g_version = "v1.3.0.1";//2022-8-1 commited for rollback.
//2022-8-7 use DialogLarge for picking product
//2022-8-10 remove semantics
//2022-8-10 search roi
//2022-8-17 datepicker
// global.g_version = "v1.3.1.19";// 2022-8-17
// global.g_version = "v1.3.1.19-qh";// 2022-8-22
//2022-8-26 ol.view use multiWorld=true.
// global.g_version = "v1.3.2.0";
// global.g_version = "v1.3.2.0-qh";
//2022-8-27 
//1 product detail page
//global.g_version = "v1.4.0.1";

//2022-9-1 
//0 GOTS 
//0 移动作图功能到图层单元格 
//global.g_version = "v1.5.0.7";//2022-9-25
// global.g_version = "v1.5.0.7-QH"; 
//global.g_version = "v1.5.0.7-WXP";
// 1 通用离线任务结果对话框 2022-12-20
global.g_version = "v1.5.1.0";
global.g_version = "v1.5.1.1"; //2023-7-1 projections

global.g_serverAPIRoot = 'http://192.168.56.101:15900/pe/';
global.g_staticResourceRoot = 'http://192.168.56.101:15980/'; //15980 是html的地址
global.g_omcindexpageurl = "http://localhost:3001/";

//for tencent tc
// global.g_serverAPIRoot = 'http://124.220.3.186:8080/api/pe/';  //tx2022-04-10
// global.g_staticResourceRoot = 'http://124.220.3.186:8080/'; //tx2022-04-10/{pe}/
// global.g_omcindexpageurl = "http://124.220.3.186:8280/" ;


//for 气候中心 qh
// global.g_serverAPIRoot =      'http://10.10.30.81:8180/api/pe/'; 
// global.g_staticResourceRoot = 'http://10.10.30.81:8180/'; 
// global.g_omcindexpageurl =    "http://10.10.30.81:8280/";

//for 卫星中心 wxp 10.24.190.128  wx 192.168.56.101
// global.g_serverAPIRoot =      'http://10.24.190.128:8180/api/pe/'; 
// global.g_staticResourceRoot = 'http://10.24.190.128:8180/'; 
// global.g_omcindexpageurl =    "http://10.24.190.128:8280/";


proj4.defs(
	'EPSG:4326','+title=WGS 84 (long/lat) +proj=longlat +ellps=WGS84 +datum=WGS84 +units=degrees'
);
proj4.defs(
	'EPSG:3413',
		  "+proj=stere +lat_0=90 +lat_ts=0 +lon_0=-45 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs +type=crs"
);
proj4.defs(
	'EPSG:3976',
			"+proj=stere +lat_0=-90 +lat_ts=-0 +lon_0=0 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs +type=crs"
);
proj4.defs(
	"EPSG:3857",
	"+proj=merc +a=6378137 +b=6378137 +lat_ts=0 +lon_0=0 +x_0=0 +y_0=0 +k=1 +units=m +nadgrids=@null +wktext +no_defs +type=crs"
	);
register(proj4);

const proj4326 = getProjection('EPSG:4326');
proj4326.setExtent([-180,-90,180,90]);

const proj3857 = getProjection('EPSG:3857');
proj3857.setExtent([-20037508.34,-20037508.34,20037508.34,20037508.348]);

const proj3413 = getProjection('EPSG:3413');
proj3413.setExtent([-12288000,-12288000,12288000,12288000]);

const proj3976 = getProjection('EPSG:3976');
proj3976.setExtent([-12288000,-12288000,12288000,12288000]);



global.g_temporyRoiIndex = 0;//临时绘制感兴趣区序号，自动加1

function App() {


	//测试用户 uid 1, uname admin, password 123456 img
	const [loginedUser, setLoginedUser] = useState(null);//2022-4-6

	const [layerGroupAArray, setLayerGroupAArray] = useState([]);
	const [layerGroupBArray, setLayerGroupBArray] = useState([]);
	const [isUsingSwipeMode, setIsUsingSwipeMode] = useState(false);
	const [isActiveGroupA, setIsActiveGroupA] = useState(true);
	const [openDialogAllProduct, setOpenDialogAllProduct] = useState(false);
	const [openDialogSelectStyle, setOpenDialogSelectStyle] = useState(false);
	const [appDateA, setAppDateA] = useState(new Date());
	const [appDateB, setAppDateB] = useState(new Date());

	//当前选择渲染方案的图层 displayid
	const [currentDisplayidForSelectStyle, setCurrentDisplayidForSelectStyle] = useState('-1');
	//选择渲染方案传递波段数量
	const [currentLyrBandCountForSelectStyle, setCurrentLyrBandCountForSelectStyle] = useState(1);
	//主工具栏命令及参数
	const [mainToolbarCommand, setMainToolbarCommand] = useState("");//roi,zin,zout,pan,rect,poly,coor
	const [mainToolbarCommandVal, setMainToolbarCommandVal] = useState(0);
	const [currentRoiObject, setCurrentRoiObject] = useState(null);//当前感兴趣区 { rid:0 , name:'----' , geojson:'url' , ... , from:'...' } 
	// from属性表示ROI来源 server表示从服务器拉取, rect通过绘制矩形,poly通过多边形绘制 
	//进入绘制模式是否通过选择ROI对话框
	const [isDrawRectOrPolyBySelectROIDialog, setIsDrawRectOrPolyBySelectROIDialog] = useState(false);
	const [viewProjection, setViewProjection] = useState("EPSG:4326") ;// Openlayer 视图投影坐标系

	//选择感兴趣区对话框 是否可见
	const [isOpenDialogSelectRoi, setIsOpenDialogSelectRoi] = useState(false);
	//SDUI对话框是否可见
	const [isOpenSDUIDialog, setIsOpenSDUIDialog] = useState(false);
	//当前SDUI的图层参数
	const [sduiLyrParams, setSduiLyrParams] = useState(null);
	const [sduiGots, setSduiGots] = useState(null);

	//数据导出对话框Open
	const [exportDialogIsOpen, setExportDialogIsOpen] = useState(false);
	//数据导出对话框lyrParams
	const [exportDialogLyrParams, setExportDialogLyrParams] = useState(null);
	//打开ROI对话框的模式 取值：app通过顶部工具栏打开，export通过数据导出对话框打开
	const [openSelectROIDialogMode, setOpenSelectROIDialogMode] = useState("app");
	//数据导出对话框选择的ROI
	const [exportDialogSelectedROI, setExportDialogSelectedROI] = useState(null);

	//区域统计对话框是否打开IsOpen
	const [statDialogIsOpen, setStatDialogIsOpen] = useState(false);
	//区域统计对话框选中的ROI
	const [statDialogSelectedROI, setStatDialogSelectedROI] = useState(null);
	//区域统计对话框图层参数
	const [statDialogLyrParams, setStatDialogLyrParams] = useState(null);

	//2022-4-4 
	///数据合成state变量
	const [compositeDialogIsOpen, setCompositeDialogIsOpen] = useState(false);
	const [compositeDialogSelectedROI, setCompositeDialogSelectedROI] = useState(null);
	const [compositeDialogLyrParams, setCompositeDialogLyrParams] = useState(null);
	//序列分析可视化变量 
	const [serialDialogIsOpen, setSerialDialogIsOpen] = useState(false);
	const [serialDialogSelectedROI, setSerialDialogSelectedROI] = useState(null);
	const [serialDialogLyrParams, setSerialDialogLyrParams] = useState(null);

	//2022-4-7 离线任务面板（资源面板）
	const [resourcePanelUpdater, setResourcePanelUpdater] = useState(0);//每次需要更新加1
	const [offtaskResultDialogIsOpen, setOfftaskResultDialogIsOpen] = useState(false);
	const [offtaskResultDialogOfftask, setOfftaskResultDialogOfftask] = useState(null);
	const [offtaskGotsResultDialogOfftask, setOfftaskGotsResultDialogOfftask] = useState(null);
	const [offtaskGotsResultDialogIsOpen, setOfftaskGotsResultDialogIsOpen] = useState(false);

	//2022-4-18 在线作图与模板
	const [isDialogOmcOpen, setIsDialogOmcOpen] = useState(false);
	const [dialogOmcSelectedRoi, setDialogOmcSelectedRoi] = useState(null);
	const [dialogOmcSelectedTemplateObj, setDialogOmcSelectedTemplateObj] = useState(null) ;
	const [isDialogTemplateOpen, setIsDialogTemplateOpen] = useState(false) ;


	//Ref
	const openlayerRef = React.useRef({});

	//脚本编辑对话框
	const [isDialogScriptEditOpen, setIsDialogScriptEditOpen] = useState(false) ;
	const [dialogScriptEditLyrParams, setDialogScriptEditLyrParams] = useState(null) ;

	//DialogLarge
	const [dialogLargeIsOpen, setDialogLargeIsOpen] = useState(false); 

	//在线作图Large
	const [dialogLargeOmcIsOpen, setDialogLargeOmcIsOpen] = useState(false);
	const [dialogLargeOmcLyrParams, setDialogLargeOmcLyrParams] = useState(null);
	const [dialogLargeOmcSelectedRoi, setDialogLargeOmcSelectedRoi] = useState(null);


	// 获取图层组最大zindex值，用于给新图层赋值zindex+1置于最顶层
	const getMaxZIndexFromLayerGroupArray = function (lyrGroup) {
		let tempMaxZIndex = 0;
		for (let i = 0; i < lyrGroup.length; ++i) {
			tempMaxZIndex = Math.max(tempMaxZIndex, lyrGroup[i].zindex);
		}
		return tempMaxZIndex;
	}

	// 点击添加图层按钮事件 弹出DialogPickProducts
	const onAddLayerClicked = function (isGroupA) {
		setIsActiveGroupA(isGroupA);
		//setOpenDialogAllProduct(true);
		setDialogLargeIsOpen(true);
	}


	//通过图层id查找group中的图层对象
	const findLayerParamByDisplayidFromParamsGroup = function (group, displayid) {
		for (let i = 0; i < group.length; ++i) {
			if (displayid === group[i].displayid) {
				return group[i];
			}
		}
		return null;
	}


	/// 检查 appLayerNearestDatetime 中对象的有效性，结果返回新的数组
	// const checkAndCleanAppLayerNearestDatetime = function () {
	// }


	//js Date 对象转Long型 YYYYMMDD000000 数据，注意目前时分秒使用0代替。
	const convertJsDate2Ymd14 = function (jsDate) {
		const dayjsdate = dayjs(jsDate);
		const datetime1 = dayjsdate.format("YYYYMMDD000000");
		return datetime1;
	}


	///转换 yyyyMMddHHmmss 到 yyyy-MM-dd HH:mm:ss 格式字符串
	const helperConvertDt14toReadableStr = function(dt14){
		dt14 = String(dt14) ;
		if( dt14.length!=14) return "1900-01-01 00:00:00" ;
		return dt14.substr(0,4)+'-'+dt14.substr(4,2)+'-'+dt14.substr(6,2) 
		+ " " + dt14.substr(8,2)+":"+dt14.substr(10,2)+":"+dt14.substr(12,2) ;
	}


	///针对一个新图层产品，获取最近时间并添加到数组,异步函数 
	/// 目前只支持pe图层 2022-1-15 deprecated 2022-5-15
	// const updateLayerNearestLowerEqualDatetime = async (isgroupA, lyrParams1) => {
	// }


	///更新整个参数数组的最近日期和时间 deprecated 2022-5-15
	// const updateGroupLayerNearestLowerEqualDatetime = async (paramsGroup, newdate) => {
	// }


	//2022-7-10
	//update loginfo when date changed
	// const updateGroupLayerLoginfo = async function(isA, paramsGroup) {
	// 	let newParamsGroup = [... paramsGroup] ;
	// 	for (let param1 of newParamsGroup) {
	// 		const loginfo1 =await fetchZeroLogInfo(isA , param1) ;
	// 		param1.loginfo = loginfo1 ;
	// 	}
	// 	if( isA===true ){
	// 		setLayerGroupAArray(newParamsGroup) ;
	// 	}else{
	// 		setLayerGroupBArray(newParamsGroup) ;
	// 	}
	// }



	// **********************************
	// 添加产品回调函数
	// 选择产品对话框选中产品确定回调函数
	// DialogPickProducts 选择图层后点击确定 
	// 回调函数的参数是选中的产品参数，如果没有选中该值为null
	// 仅针对用户离线合成任务的数据添加使用
	const onDialogPickProductsOk = async function (pdtObj) {
		//检查是否已添加产品，如果没有添加则添加它
		const currentGroupArray = isActiveGroupA ? layerGroupAArray : layerGroupBArray;
		let hasPdt = false;
		for (const iterator of currentGroupArray) {
            if (iterator.displayid === pdtObj.displayid ) {
				hasPdt=true;
				break;
            }
        }
		if( hasPdt===false ){
			onLargeDialogProductCheckChanged(pdtObj,true);
		}
	}

	// 选择产品对话框关闭 DialogPickProducts 点击取消
	const onDialogPickProductsCancel = function () {
		setOpenDialogAllProduct(false);
	}


	const onStartCompareClicked = function () {

		if (isUsingSwipeMode == false) setIsUsingSwipeMode(true);

	}

	const onStopCompareClicked = function () {

		setLayerGroupBArray([]);
		if (isUsingSwipeMode == true) setIsUsingSwipeMode(false);
	}


	//a helper function for onDragEnd
	const helperReorderFunction = function (arr, sourceZIndex, destinationZIndex) {
		if (arr.length <= 1) {
			return [...arr];
		} else {
			let resultArr = [...arr];
			for (let i = 0; i < resultArr.length; ++i) {
				if (sourceZIndex < destinationZIndex) {//rise
					if (resultArr[i].zindex >= sourceZIndex && resultArr[i].zindex <= destinationZIndex) {
						if (resultArr[i].zindex == sourceZIndex) {
							resultArr[i].zindex = destinationZIndex;
						} else {
							resultArr[i].zindex = resultArr[i].zindex - 1;
						}
					}
				} else {
					//downside
					if (resultArr[i].zindex >= destinationZIndex && resultArr[i].zindex <= sourceZIndex) {
						if (resultArr[i].zindex == sourceZIndex) {
							resultArr[i].zindex = destinationZIndex;
						} else {
							resultArr[i].zindex = resultArr[i].zindex + 1;
						}
					}
				}
			}
			return resultArr;
		}
	}

	//图层列表中图层顺序发生变化回调函数，该函数仅将新顺序传给MapPanel组件，在MapPanel组件中通过olMap的引用调整图层index
	const onLayerOrderChangedCallback = function (tIsGroupA, sourceZIndex, targetZIndex) {
		if (tIsGroupA === true) {
			setLayerGroupAArray(helperReorderFunction(layerGroupAArray, sourceZIndex, targetZIndex));
		} else {
			setLayerGroupBArray(helperReorderFunction(layerGroupBArray, sourceZIndex, targetZIndex));
		}
		setIsActiveGroupA(tIsGroupA);
	}


	//日期控制器中日期变动
	const onDateAChangedCallback = function (newdateA) {
		setAppDateA(newdateA);
	}
	const onDateBChangedCallback = function (newdateB) {
		setAppDateB(newdateB);
	}



	//某个图层cell可见属性切换回调函数
	const onLayerPanelSomeLayerToggleLayerVisibleCallback = function (isgroupA, displayid) {
		if (isgroupA === true) {
			let newParamsGroup = [...layerGroupAArray];
			let newParam = findLayerParamByDisplayidFromParamsGroup(newParamsGroup, displayid);
			if (newParam !== null) {
				newParam.visible = !newParam.visible;
				setLayerGroupAArray(newParamsGroup);
			}
		} else {
			let newParamsGroup = [...layerGroupBArray];
			let newParam = findLayerParamByDisplayidFromParamsGroup(newParamsGroup, displayid);
			if (newParam !== null) {
				newParam.visible = !newParam.visible;
				setLayerGroupBArray(newParamsGroup);
			}
		}
	}

	//某个图层关闭按钮点击回调
	const onLayerPanelLayerCellCloseLayerCallback = function (isgroupA, displayid) {
		if (isgroupA === true) {
			let newParamsGroup = layerGroupAArray.filter(item1 => {
				return ( item1.displayid !== displayid )
			});
			setLayerGroupAArray(newParamsGroup);
		} else {
			let newParamsGroup = layerGroupBArray.filter(item1 => {
				return ( item1.displayid !== displayid )
			});
			setLayerGroupBArray(newParamsGroup);
		}
	}


	//某个图层单元格编辑渲染方案按钮点击
	const onLayerCellEditStyleClickedCallback = function (displayid) {
		let lyrParams = null;
		if( isActiveGroupA ){
			lyrParams = findLayerParamByDisplayidFromParamsGroup(layerGroupAArray, displayid);
		}else{
			lyrParams = findLayerParamByDisplayidFromParamsGroup(layerGroupBArray, displayid);
		}

		let lyrcount = 1 ;
		if( typeof lyrParams.bandList === 'undefined'){
			//user script 
			lyrcount = 1 ;
		}else{
			lyrcount = lyrParams.bandList.length;//获取波段数量
		}
		
		if (lyrcount <= 0) lyrcount = 1;//最少有一个波段
		setCurrentLyrBandCountForSelectStyle(lyrcount);
		setCurrentDisplayidForSelectStyle(displayid);
		setOpenDialogSelectStyle(true);
	}


	///选择渲染方案对话框 OK 点击事件
	const onDialogSelectStyleOKCallback = function (pickedStyleId) {
		//找到图层参数
		let lyrParams =null;
		if( isActiveGroupA ){
			lyrParams = findLayerParamByDisplayidFromParamsGroup(layerGroupAArray, currentDisplayidForSelectStyle);
		}else{
			lyrParams = findLayerParamByDisplayidFromParamsGroup(layerGroupBArray, currentDisplayidForSelectStyle);
		}
		if (lyrParams !== null) {
			//找到图层参数了
			if (lyrParams.productDisplay.type === 'pe' ||
				lyrParams.productDisplay.type === 'pes' ||
				lyrParams.productDisplay.type === 'us' ||
				lyrParams.productDisplay.type === 'ud'
			) {
				let newLyrParams = {...lyrParams} ;
				//pe 图层重设渲染方案的styleid
				newLyrParams.styleid = pickedStyleId;
				if (isActiveGroupA) {
					let newArray=[];
					for(let ii=0;ii<layerGroupAArray.length;++ii){
						if( layerGroupAArray[ii].displayid !== newLyrParams.displayid ){
							newArray.push(layerGroupAArray[ii]);
						}else{
							newArray.push(newLyrParams);
						}
					}
					setLayerGroupAArray(newArray);
				} else {
					let newArray=[];
					for(let ii=0;ii<layerGroupBArray.length;++ii){
						if( layerGroupBArray[ii].displayid !== newLyrParams.displayid ){
							newArray.push(layerGroupBArray[ii]);
						}else{
							newArray.push(newLyrParams);
						}
					}
					setLayerGroupBArray(newArray);
				}
			}
		}
		setOpenDialogSelectStyle(false);
		setCurrentDisplayidForSelectStyle('-1');
	}

	///选择渲染方案对话框 Cancel 点击事件
	const onDialogSelectStyleCancelCallback = function () {

		setOpenDialogSelectStyle(false);
	}

	// 图层单元格SDUI按钮点击时间
	const onLayerCellSDUIClickedCallback = function (lyrParams) {
		setSduiLyrParams(lyrParams);
		setSduiGots(null);
		setIsOpenSDUIDialog(true);

	}

	// 图层单元点击脚本按钮，针对用户脚本
	const onLayerCellScriptClick = function ( lyrParams ){
		setDialogScriptEditLyrParams(lyrParams);
		setIsDialogScriptEditOpen(true) ;
	}

	// 图层单元点击Gots按钮
	const onLayerCellGotsClick = function ( lyrParams, gotsMeta ){
		setSduiLyrParams(lyrParams);
		setSduiGots(gotsMeta);
		setIsOpenSDUIDialog(true);
	}




	//主工具栏按钮事件 ROI
	const MTBOnRoiButtonClick = function () {
		//roi,zin,zout,pan,rect,poly,coor
		//setMainToolbarCommand("roi");
		setOpenSelectROIDialogMode("app");
		//打开ROI对话框
		setIsOpenDialogSelectRoi(true);
	}


	//主工具栏按钮事件 放大
	const MTBOnZoomInClick = function () {
		//zin,zout,pan,rect,poly,coor
		setMainToolbarCommand('zin');
		setMainToolbarCommandVal(mainToolbarCommandVal + 1);
	}
	//主工具栏按钮事件 缩小
	const MTBOnZoomOutClick = function () {
		setMainToolbarCommand('zout');
		setMainToolbarCommandVal(mainToolbarCommandVal - 1);
	}
	//主工具栏按钮事件 平移
	const MTBOnPanClick = function () {
		setMainToolbarCommand('pan');
		setMainToolbarCommandVal(mainToolbarCommandVal - 1);
	}

	//主工具栏按钮事件 探针工具
	const MTBOnPinClick = function () {

		setMainToolbarCommand('pin');
		setMainToolbarCommandVal(mainToolbarCommandVal + 1);
	}


	//主工具栏按钮事件 绘制矩形
	const MTBOnDrawRectClick = function () {
		//roi,zin,zout,pan,rect,poly,coor
		setIsDrawRectOrPolyBySelectROIDialog(false);
		setMainToolbarCommand("rect");
		setMainToolbarCommandVal(mainToolbarCommandVal - 1);
	}
	//主工具栏按钮事件 绘制多边形
	const MTBOnDrawPolygonClick = function () {
		//roi,zin,zout,pan,rect,poly,coor
		setIsDrawRectOrPolyBySelectROIDialog(false);
		setMainToolbarCommand("poly");
		setMainToolbarCommandVal(mainToolbarCommandVal + 1);
	}
	//主工具栏按钮事件 地图全屏
	const MTBOnFullScreenClick = function () {

	}
	//主工具栏按钮事件 在线绘图
	const MTBOnLayoutClick = function () {
		//直接打开作图功能页面
		let uid1 = loginedUser.uid ;
        const url1 = global.g_omcindexpageurl+"?" + "uid=" + uid1 ;
        window.open(url1, "_blank") ;
	}
	//主工具栏按钮事件 坐标变换 
	const MTBOnCoordinateChanged = function (event) {
		//roi,zin,zout,pan,rect,poly,coor
		setViewProjection( event.target.value ) ;
		setMainToolbarCommand("coor");
		setMainToolbarCommandVal(event.target.value) ;
		
	}
	//主工具栏清除感兴趣按钮
	const MTBRoiClearClickCallback = function () {
		setCurrentRoiObject(null);
		setMainToolbarCommand("clear");
		setMainToolbarCommandVal(mainToolbarCommandVal + 1);
	}
	//主工具栏退出按钮
	const onMTBQuitClick = function () {
		cookie.remove('userinfo', { path: "/" });
		setLoginedUser(null);
		setLayerGroupAArray([]);
		setLayerGroupBArray([]);
		setCurrentRoiObject(null);
	}


	//OpenLayer.Map 在地图中绘制感兴趣区完成回调函数
	const onMapRoiDrawEndCallback = function (roi) {
		setCurrentRoiObject(roi);
		if (isDrawRectOrPolyBySelectROIDialog === true) {
			//重新打开选择ROI对话框，并把geojson或者坐标信息写进去
			setIsOpenDialogSelectRoi(true);
			setIsDrawRectOrPolyBySelectROIDialog(false);
		}
	}

	//确认 选择ROI对话框
	const onDialogSelectRoiOkCallback = function (roiObj) {
		if (roiObj !== null) {
			setIsOpenDialogSelectRoi(false);

			if (openSelectROIDialogMode === "export") {
				setExportDialogSelectedROI(roiObj);
				setExportDialogIsOpen(true);
			}
			else if (openSelectROIDialogMode === "stat") {
				setStatDialogSelectedROI(roiObj);
				setStatDialogIsOpen(true);
			}
			else if (openSelectROIDialogMode === "composite") {
				setCompositeDialogSelectedROI(roiObj);
				setCompositeDialogIsOpen(true);
			}
			else if (openSelectROIDialogMode === "serial") {
				setSerialDialogSelectedROI(roiObj);
				setSerialDialogIsOpen(true);
			}
			else if (openSelectROIDialogMode === 'omc') {
				setDialogOmcSelectedRoi(roiObj);
				setIsDialogOmcOpen(true);
			}
			else if( openSelectROIDialogMode==='omcL'){
				setDialogLargeOmcSelectedRoi(roiObj);
				setDialogLargeOmcIsOpen(true);
			}
			else {
				setCurrentRoiObject(roiObj);
			}
		}
	}

	//取消 选择ROI对话框
	const onDialogSelectRoiCancelCallback = function () {
		setIsOpenDialogSelectRoi(false);
		if (openSelectROIDialogMode === "export") {
			setExportDialogIsOpen(true);
		}else if (openSelectROIDialogMode === "stat") {
			setStatDialogIsOpen(true);
		}
		else if (openSelectROIDialogMode === "composite") {
			setCompositeDialogIsOpen(true);
		}
		else if (openSelectROIDialogMode === "serial") {
			setSerialDialogIsOpen(true);
		}
		else if (openSelectROIDialogMode === 'omc') {
			setIsDialogOmcOpen(true);
		}
	}

	//选择ROI对话框中点击绘制多边形
	const DialogSelectRoiOnDrawPolygonClicked = function () {
		setIsOpenDialogSelectRoi(false);
		setIsDrawRectOrPolyBySelectROIDialog(true);
		setMainToolbarCommand("poly");
		setMainToolbarCommandVal(mainToolbarCommandVal + 1);
	}

	//选择ROI对话框中点击绘制矩形
	const DialogSelectRoiOnDrawRectClicked = function () {
		setIsOpenDialogSelectRoi(false);
		setIsDrawRectOrPolyBySelectROIDialog(true);
		setMainToolbarCommand("rect");
		setMainToolbarCommandVal(mainToolbarCommandVal - 1);
	}


	//关闭SDUI对话框
	const DialogSDUIOnCancel = function () {
		setSduiGots(null);
		setSduiLyrParams(null);
		setIsOpenSDUIDialog(false);
	}

	//SDUI对话框点击确定按钮
	const DialogSDUIOnOk = async function ( displayid , sduiObj) {
		let lyrParams = null;
		if( isActiveGroupA ){
			lyrParams=findLayerParamByDisplayidFromParamsGroup(layerGroupAArray, displayid);
			lyrParams.sdui = sduiObj;
			setLayerGroupAArray([...layerGroupAArray]);
		}else{
			lyrParams = findLayerParamByDisplayidFromParamsGroup(layerGroupBArray, displayid);
			lyrParams.sdui = sduiObj;
			setLayerGroupBArray([...layerGroupBArray]);
		}
		setIsOpenSDUIDialog(false);
	}



	//数据导出对话框OK
	const exportDialogOnOk = function (taskObj) {

		const url = global.g_serverAPIRoot + "offtask/export/new2";
		let formdata = new FormData();
		formdata.append("uid", taskObj.uid);
		formdata.append("mode", taskObj.mode);
		formdata.append("datetime", taskObj.datetime);
		formdata.append("geojson", taskObj.geojson);
		formdata.append("pid", taskObj.pid);
		formdata.append("sid", taskObj.sid);
		formdata.append("sdui", taskObj.sdui);
		formdata.append("fillvalue", taskObj.fillValue);
		fetch(
			url,
			{
				method: 'POST',
				body: formdata,
			}
		)
			.then((response) => response.json())
			.then((result) => {
				// 任务提交完成可以更新资源面板了
				setResourcePanelUpdater(resourcePanelUpdater + 1);
			});
		setExportDialogIsOpen(false);

	}

	//数据导出对话框选择ROI
	const exportDialogOnSelectROI = function () {
		setExportDialogSelectedROI(null);
		//关闭数据导出对话框 
		setExportDialogIsOpen(false);
		//打开选择ROI对话框
		setOpenSelectROIDialogMode("export");
		setIsOpenDialogSelectRoi(true);
	}


	//数据导出对话框Cancel
	const exportDialogOnCancel = function () {
		setExportDialogIsOpen(false);
	}


	// 图层单元格底部四按钮
	// 数据导出按钮
	const onLayerCellExportClick = function (lyrParams) {
		setExportDialogSelectedROI(null);
		setExportDialogLyrParams(lyrParams);
		setExportDialogIsOpen(true);
	}
	// 数据区域统计按钮
	const onLayerCellStatisticClick = function (lyrParams) {
		setStatDialogSelectedROI(null);
		setStatDialogLyrParams(lyrParams);
		setStatDialogIsOpen(true);
	}
	// 数据合成按钮
	const onLayerCellCompositeClick = function (lyrParams) {
		setCompositeDialogSelectedROI(null);
		setCompositeDialogLyrParams(lyrParams);
		setCompositeDialogIsOpen(true);
	}
	// 数据序列分析按钮
	const onLayerCellSerialClick = function (lyrParams) {
		setSerialDialogSelectedROI(null);
		setSerialDialogLyrParams(lyrParams);
		setSerialDialogIsOpen(true);
	}
	//OMC作图功能
	const onLayerCellOmcClick = function(lyrParams) {
		//
		setDialogLargeOmcLyrParams(lyrParams);
		setDialogLargeOmcIsOpen(true);

	} 
	//图层面板 A B 切换
	const onLayerPanelIsActiveGroupASetting = function (useA) {
		setIsActiveGroupA(useA);
	}




	///区域统计对话框相关函数 -------------------------------------
	//区域统计对话框 确定 按钮 onOK
	const statDialogOnOK = function (
		displayid,
		dsname,
		roiid,
		roigeojson,
		validmin,
		validmax
	) {
		let lyrParams = null;
		let datetime1 = 0;
		if( isActiveGroupA ){
			lyrParams = findLayerParamByDisplayidFromParamsGroup(layerGroupAArray, displayid);
			datetime1 = convertJsDate2Ymd14(appDateA);
		}else{
			lyrParams = findLayerParamByDisplayidFromParamsGroup(layerGroupBArray, displayid);
			datetime1 = convertJsDate2Ymd14(appDateB);
		}

		let formdata = new FormData();
		formdata.append("uid", loginedUser.uid);

		let t_dsname = '';
		let t_sid = '0';

		if (lyrParams.productDisplay.type === 'pe'
			|| lyrParams.productDisplay.type === 'ud'
		) {
			t_dsname = dsname;
			t_sid = '0';
		} else if (lyrParams.productDisplay.type === 'pes'
			|| lyrParams.productDisplay.type === 'us'
		) {
			t_dsname = '';
			if (lyrParams.productDisplay.params !== null && lyrParams.productDisplay.params !== '') {
				let t_pdtdisplayParams = JSON.parse(lyrParams.productDisplay.params);
				t_sid = t_pdtdisplayParams.sid;
			}
		}

		//2022-7-27
		let tempSduiStr="";
		if( typeof lyrParams.sdui !== 'undefined' ){
			tempSduiStr=JSON.stringify(lyrParams.sdui);
		}

		formdata.append("dsname", t_dsname);
		formdata.append("sid", t_sid);
		formdata.append("roiid", roiid);
		formdata.append("roigeojson", roigeojson);
		formdata.append("validmin", validmin);
		formdata.append("validmax", validmax);
		formdata.append("datetime", datetime1 );
		formdata.append("sdui", tempSduiStr);
		const url = global.g_serverAPIRoot + "offtask/stat/new2";
		fetch(
			url,
			{
				method: 'POST',
				body: formdata,
			}
		)
			.then((response) => response.json())
			.then((result) => {
				// 任务提交完成可以更新资源面板了
				setResourcePanelUpdater(resourcePanelUpdater + 1);
			});

		setStatDialogIsOpen(false);


	}
	//区域统计对话框取消按钮 onCancel
	const statDialogOnCancel = function () {
		setStatDialogIsOpen(false);
	}
	//区域统计对话框 选择ROI 按钮点击
	const statDialogOnSelectROI = function () {
		setStatDialogSelectedROI(null);
		//关闭数据导出对话框 
		setStatDialogIsOpen(false);
		//打开选择ROI对话框
		setOpenSelectROIDialogMode("stat");
		setIsOpenDialogSelectRoi(true);
	}
	///区域统计对话框相关函数 END ---------------------------------








	//数据合成对话框回调函数 ----------------------------------
	const compositeDialogOnOk = function (
		dsname,
		startdtvalue,
		stopdtvalue,
		roiid,
		roigeojson,
		validmin,
		validmax,
		filldata,
		compositeMethod
	) {
		//Only for pe product

		let formdata = new FormData();
		formdata.append("uid", loginedUser.uid);
		formdata.append("dsname", dsname);
		formdata.append("startdt", startdtvalue);
		formdata.append("stopdt", stopdtvalue);
		formdata.append("roiid", roiid);
		formdata.append("roigeojson", roigeojson);
		formdata.append("validmin", validmin);
		formdata.append("validmax", validmax);
		formdata.append("filldata", filldata);
		formdata.append("cmethod", compositeMethod);
		const url = global.g_serverAPIRoot + "offtask/composite/new2";
		fetch(
			url,
			{
				method: 'POST',
				body: formdata,
			}
		)
			.then((response) => response.json())
			.then((result) => {
				// 任务提交完成可以更新资源面板了
				setResourcePanelUpdater(resourcePanelUpdater + 1);
			});

		setCompositeDialogIsOpen(false);


	}

	const compositeDialogOnCancel = function () {
		setCompositeDialogIsOpen(false);
	}

	const compositeDialogOnSelectROI = function () {
		setCompositeDialogSelectedROI(null);
		setCompositeDialogIsOpen(false);
		setOpenSelectROIDialogMode("composite");
		setIsOpenDialogSelectRoi(true);
	}

	//数据合成对话框回调函数 END  -----------------------------








	//序列分析对话框回调函数 ----------------------------------
	const serialDialogOnOk = function (
		dsname,
		repeattype, //'n' , 'm' , 'y'
		startdtvalue, // 14
		stopdtvalue,
		repeatstartdtval,
		repeatstopdtval,
		nextyearval,
		cmethod,
		roiid,
		roigeojson,
		validmin,
		validmax,
		filldata
	) {

		//Only for pe product

		let formdata = new FormData();
		formdata.append("uid", loginedUser.uid);
		formdata.append("dsname", dsname);
		formdata.append("repeattype", repeattype);
		formdata.append("wholestartdt", startdtvalue);
		formdata.append("wholestopdt", stopdtvalue);
		formdata.append("repeatstartdt", repeatstartdtval);
		formdata.append("repeatstopdt", repeatstopdtval);
		formdata.append("repeatstopnextyear", nextyearval);
		formdata.append("cmethod", cmethod);
		formdata.append("roiid", roiid);
		formdata.append("roigeojson", roigeojson);
		formdata.append("validmin", validmin);
		formdata.append("validmax", validmax);
		formdata.append("filldata", filldata);
		const url = global.g_serverAPIRoot + "offtask/serial/new2";
		fetch(
			url,
			{
				method: 'POST',
				body: formdata,
			}
		)
			.then((response) => response.json())
			.then((result) => {
				// 任务提交完成可以更新资源面板了
				setResourcePanelUpdater(resourcePanelUpdater + 1);
			});

		setSerialDialogIsOpen(false);



	}

	const serialDialogOnCancel = function () {
		setSerialDialogIsOpen(false);
	}
	const serialDialogOnSelectROI = function () {
		setSerialDialogSelectedROI(null);
		setSerialDialogIsOpen(false);
		setOpenSelectROIDialogMode("serial");
		setIsOpenDialogSelectRoi(true);
	}

	//数据合成对话框回调函数 END  -----------------------------




	//登录信息 保存到cookie------------------------------------
	useEffect(() => {
		//初次进入页面从cookie加载用户信息
		let userinfo = cookie.load("userinfo");
		if (typeof userinfo === 'undefined' || userinfo === null) return;
		setLoginedUser(userinfo);
	}, [])

	const onLoginComponentSetUser = function (userinfo) {
		//uid name avator
		cookie.save('userinfo', userinfo, { path: "/" });
		setLoginedUser(userinfo);
	}

	if (!loginedUser) {
		return <Login setUser={onLoginComponentSetUser} />
	}

	//登录信息------------------------------------ END







	//资源面板回调函数   -------------------------
	const onResourcePanelCellViewClick = function (offtask) {
		if(offtask.mode==6 ){
			//GOTS
			setOfftaskGotsResultDialogOfftask(offtask) ;
			setOfftaskGotsResultDialogIsOpen(true) ;	
		}else{
			setOfftaskResultDialogOfftask(offtask);
			setOfftaskResultDialogIsOpen(true);
		}
	}
	const onOfftaskResultDialogOk = function () {
		setOfftaskResultDialogIsOpen(false);
	}
	const onOfftaskResultDialogCancel = function () {
		setOfftaskResultDialogIsOpen(false);
	}
	const onOfftaskResultDialogAddLayer = function (lyr) {
		onDialogPickProductsOk(lyr);
		setOfftaskResultDialogIsOpen(false);
	}
	const onOfftaskCellDeleteCallback = function (ofid) {
		const url = global.g_serverAPIRoot + "offtask/remove";
		let formData = new FormData();
		formData.append("ofid", ofid);
		fetch(url,
			{
				method: 'POST',
				body: formData
			}
		).then(response => response.json()).then((result) => {
			setResourcePanelUpdater(Number(resourcePanelUpdater) + 1);
		});

	}

	//GOTS 
	const onOfftaskGotsResultDialogCancel = function() {
		setOfftaskGotsResultDialogIsOpen(false);
		setOfftaskGotsResultDialogOfftask(null) ;
	}

	//资源面板回调函数   ------------------------- END





	// 在线作图 与作图模板对话框函数 ////////////////// START
	const onDialogOmcOk = function () {
		setIsDialogOmcOpen(false);
		setDialogOmcSelectedRoi(null);
	}

	const onDialogOmcCancel = function () {
		setIsDialogOmcOpen(false);
		setDialogOmcSelectedRoi(null);
	}


	const onDialogOmcRoi = function () {
		setDialogOmcSelectedRoi(null);
		setIsDialogOmcOpen(false);
		setOpenSelectROIDialogMode("omc");
		setIsOpenDialogSelectRoi(true);
	}


	const onDialogOmcSelectTemplateClick = function() {
		setDialogOmcSelectedTemplateObj(null) ;
		setIsDialogOmcOpen(false) ;
		setIsDialogTemplateOpen(true) ;
	}

	const onDialogTemplateOk = function(obj) {
		setDialogOmcSelectedTemplateObj(obj) ;
		setIsDialogOmcOpen(true) ;
		setIsDialogTemplateOpen(false) ;
	}

	const onDialogTemplateCancel = function() {
		setIsDialogTemplateOpen(false) ;
		setIsDialogOmcOpen(true) ;
	}


	// 在线作图 ////////////////// END









	// 脚本编辑对话框 ///////////////////  START
	const onDialogScriptEditCancel = function() {
		setIsDialogScriptEditOpen(false) ;
		setDialogScriptEditLyrParams(null) ;
	}
	const onDialogScriptEditOk = function (lyrParam1, utime1) {
		if( lyrParam1.front_group==='A'){
			let newArr = [] ;
			for(let i = 0 ; i < layerGroupAArray.length; ++ i ){
				if( layerGroupAArray[i].displayid !== lyrParam1.displayid ){
					newArr.push(layerGroupAArray[i]) ;
				}else{
					let newLyr = {... lyrParam1} ;
					newLyr.utime = utime1 ;
					newArr.push(newLyr) ;
				}
			}
			setLayerGroupAArray(newArr) ;
		}else{
			let newArr = [] ;
			for(let i = 0 ; i < layerGroupBArray.length; ++ i ){
				if( layerGroupBArray[i].displayid !== lyrParam1.displayid ){
					newArr.push(layerGroupBArray[i]) ;
				}else{
					let newLyr = {... lyrParam1} ;
					newLyr.utime = utime1 ;
					newArr.push(newLyr) ;
				}
			}
			setLayerGroupBArray(newArr) ;
		}
		setIsDialogScriptEditOpen(false) ;
		setDialogScriptEditLyrParams(null) ;
	}

	// 脚本编辑对话框 /////////////////// END





	////////// 新产品对话框 
	//////////////////////////////////////////////
	const onDialogLargeClose = function() {
		setDialogLargeIsOpen(false);
	}

	//添加产品或者移除产品图层
	const onLargeDialogProductCheckChanged = function(pdtinfo , isChecked )
	{
		if( isChecked===true ){
			//添加产品
			const currentGroupArray = isActiveGroupA ? layerGroupAArray : layerGroupBArray;
			const zindex = getMaxZIndexFromLayerGroupArray(currentGroupArray) + 1;
			const visible = true;
			const opacity = 1.0;
			const front_group = (isActiveGroupA ? "A" : "B");
			// **********************************************************
			// 每个图层参数对象增加了 visible , zindex ,opacity 
			//针对pes产品默认渲染方案策略稍有不同
			if( pdtinfo.productDisplay.type==='pes' ){
				//pes产品检查productDisplay.params下面是否配置了默认styleid
				const tstr1 = pdtinfo.productDisplay.params ;
				if( tstr1.length > 10 ){
					const tjson1 = JSON.parse(tstr1) ;
					if( typeof tjson1.styleid != 'undefined'){
						pdtinfo.styleid = tjson1.styleid ;
					}
				}
			}
			const newLyrParam = { visible, zindex, opacity,
				front_group,
				...pdtinfo };

			if (isActiveGroupA) {
				setLayerGroupAArray([...layerGroupAArray, newLyrParam]);		
			} else {
				setLayerGroupBArray([...layerGroupBArray, newLyrParam]);	
			}
			
		}else{
			//移除产品
			const currentGroupArray = isActiveGroupA ? layerGroupAArray : layerGroupBArray;
			const newArray = currentGroupArray.filter( pdt1 => pdt1.displayid!== pdtinfo.displayid );
			if (isActiveGroupA) {
				setLayerGroupAArray(newArray);		
			} else {
				setLayerGroupBArray(newArray);	
			}
		}
	}

	/////////////////////////////////////////////





	///////////////////////////////////////////////
	/// 产品在线作图对话框
	const onDialogLargeOmcOkClick = function() {
		setDialogLargeOmcLyrParams(null);
		setDialogLargeOmcIsOpen(false);
	}

	const onDialogLargeOmcCancelClick = function() {
		setDialogLargeOmcLyrParams(null);
		setDialogLargeOmcIsOpen(false);
	}

	const onDialogLargeOmcSelectROIClick = function() {
		setDialogLargeOmcSelectedRoi(null);
		setDialogLargeOmcIsOpen(false);
		setOpenSelectROIDialogMode("omcL");
		setIsOpenDialogSelectRoi(true);

	}

	///
	//////////////////////////////////////////////




	return (
		<div className="App">
			<MapPanel
				groupA={layerGroupAArray}
				groupB={layerGroupBArray}
				isUsingSwipeMode={isUsingSwipeMode}
				isActiveGroupA={isActiveGroupA}
				// layerNearestDatetime={appLayerNearestDatetime}
				mtbCmd={mainToolbarCommand}
				mtbCmdVal={mainToolbarCommandVal}
				onMapRoiDrawEndCallback={onMapRoiDrawEndCallback}
				//当前时间
				appDateA={appDateA}
				appDateB={appDateB}
				//当前感兴趣
				currentRoiObject={currentRoiObject}
				openlayerRef={openlayerRef}

				viewProjection={viewProjection}
			/>

			{/* 图层管理面板 */}
			<LayersManagePanel
				groupA={layerGroupAArray}
				groupB={layerGroupBArray}
				//当前时间2022-7-19
				appDateA={appDateA}
				appDateB={appDateB}

				onAddLayerClicked={onAddLayerClicked}
				onStartCompareClicked={onStartCompareClicked}
				onStopCompareClicked={onStopCompareClicked}
				onLayerOrderChanged={onLayerOrderChangedCallback}
				// layerNearestDatetime={appLayerNearestDatetime}
				onToggleLayerVisible={onLayerPanelSomeLayerToggleLayerVisibleCallback}
				onLayerCellCloseLayer={onLayerPanelLayerCellCloseLayerCallback}
				onLayerCellEditStyleClickedCallback={onLayerCellEditStyleClickedCallback}
				onLayerCellSDUIClickedCallback={onLayerCellSDUIClickedCallback}
				onLayerCellScriptClick={onLayerCellScriptClick}
				onLayerCellGotsClick={onLayerCellGotsClick}
				// 图层单元格底部四按钮
				onLayerCellExportClick={onLayerCellExportClick}
				onLayerCellStatisticClick={onLayerCellStatisticClick}
				onLayerCellCompositeClick={onLayerCellCompositeClick}
				onLayerCellSerialClick={onLayerCellSerialClick}
				onLayerCellOmcClick={onLayerCellOmcClick}
				isActiveGroupA={isActiveGroupA}
				onIsActiveGroupASetting={onLayerPanelIsActiveGroupASetting}
			/>


			<DateSelectPanel dateA={appDateA} dateB={appDateB} isUsingSwipeMode={isUsingSwipeMode}
				onDateAChanged={onDateAChangedCallback}
				onDateBChanged={onDateBChangedCallback}
			/>

			{/* 资源面板 */}
			<ResourcesPanel
				loginedUser={loginedUser}
				update={resourcePanelUpdater}
				onCellViewClick={onResourcePanelCellViewClick}
				onCellDeleteClick={onOfftaskCellDeleteCallback}
			/>

			{/* 主工具栏 */}
			<MainToolbarPanel
				onRoiButtonClick={MTBOnRoiButtonClick}
				onZoomInClick={MTBOnZoomInClick}
				onZoomOutClick={MTBOnZoomOutClick}
				onPanClick={MTBOnPanClick}
				onPinClick={MTBOnPinClick}
				onDrawRectClick={MTBOnDrawRectClick}
				onDrawPolygonClick={MTBOnDrawPolygonClick}
				onFullScreenClick={MTBOnFullScreenClick}
				onLayoutClick={MTBOnLayoutClick}
				onCoordinateChanged={MTBOnCoordinateChanged}
				currentRoiObject={currentRoiObject}
				onRoiClearClickCallback={MTBRoiClearClickCallback}
				loginedUser={loginedUser}
				onUserQuit={onMTBQuitClick}
				viewProjection={viewProjection}
			/>

			{/* 选择渲染方案对话框 */}
			<DialogSelectStyle isOpen={openDialogSelectStyle}
				onOk={onDialogSelectStyleOKCallback}
				onCancel={onDialogSelectStyleCancelCallback}
				loginedUser={loginedUser}
				bandCount={currentLyrBandCountForSelectStyle}
			/>


			{/* 选择ROI对话框 */}
			<DialogSelectRoi
				isOpen={isOpenDialogSelectRoi}
				onOk={onDialogSelectRoiOkCallback}
				onCancel={onDialogSelectRoiCancelCallback}
				onDrawRectClicked={DialogSelectRoiOnDrawRectClicked}
				onDrawPolygonClicked={DialogSelectRoiOnDrawPolygonClicked}
				currentRoiObject={currentRoiObject}
				loginedUser={loginedUser}
			/>


			{/* SDUI对话框 */}
			<DialogSimpleSDUI
				isOpen={isOpenSDUIDialog}
				onCancel={DialogSDUIOnCancel}
				lyrParams={sduiLyrParams}
				gots={sduiGots}
				onOk={DialogSDUIOnOk}
				isActiveGroupA={isActiveGroupA}
				appDateA={appDateA}
				appDateB={appDateB}
				loginedUser={loginedUser}
			/>


			{/* 数据导出对话框 */}
			<DialogSimpleExport
				onOk={exportDialogOnOk}
				onCancel={exportDialogOnCancel}
				lyrParams={exportDialogLyrParams}
				isOpen={exportDialogIsOpen}
				appCurrentROI={currentRoiObject}
				onSelectROIClick={exportDialogOnSelectROI}
				selectedROI={exportDialogSelectedROI}
				loginedUser={loginedUser}
				appDateA={appDateA}
				appDateB={appDateB}
			/>



			{/* 区域统计对话框 */}
			<DialogSimpleStatistic
				isOpen={statDialogIsOpen}
				onOk={statDialogOnOK}
				onCancel={statDialogOnCancel}
				lyrParams={statDialogLyrParams}
				appCurrentROI={currentRoiObject}
				onSelectROIClick={statDialogOnSelectROI}
				selectedROI={statDialogSelectedROI}
			/>

			{/* 数据合成对话框 */}
			<DialogSimpleComposite
				lyrParams={compositeDialogLyrParams}
				appCurrentROI={currentRoiObject}
				onOk={compositeDialogOnOk}
				onCancel={compositeDialogOnCancel}
				isOpen={compositeDialogIsOpen}
				onSelectROIClick={compositeDialogOnSelectROI}
				selectedROI={compositeDialogSelectedROI}
			/>


			{/* 序列分析对话框 */}
			<DialogSimpleSerialAnalyse
				lyrParams={serialDialogLyrParams}
				appCurrentROI={currentRoiObject}
				onOk={serialDialogOnOk}
				onCancel={serialDialogOnCancel}
				isOpen={serialDialogIsOpen}
				onSelectROIClick={serialDialogOnSelectROI}
				selectedROI={serialDialogSelectedROI}
			/>


			{/* 离线任务结果显示对话框 */}
			<DialogSimpleOfftaskResult
				isOpen={offtaskResultDialogIsOpen}
				onOk={onOfftaskResultDialogOk}
				onCancel={onOfftaskResultDialogCancel}
				offtask={offtaskResultDialogOfftask}
				onAddLayer={onOfftaskResultDialogAddLayer}
			/>

			{/* GOTS通用离线任务结果对话框 */}
			<DialogGotsResultDialog 
				isOpen={offtaskGotsResultDialogIsOpen}
				onCancel={onOfftaskGotsResultDialogCancel}
				offtask={offtaskGotsResultDialogOfftask}
			/>



			{/* 在线作图对话框 */}
			<DialogSimpleOmc
				isOpen={isDialogOmcOpen}
				onOk={onDialogOmcOk}
				onCancel={onDialogOmcCancel}
				lyrParamsGroup={layerGroupAArray}
				onSelectROIClick={onDialogOmcRoi}
				appCurrentROI={currentRoiObject}
				selectedROI={dialogOmcSelectedRoi}
				loginedUser={loginedUser}
				openlayerRef={openlayerRef}
				onSelectTemplateClick={onDialogOmcSelectTemplateClick}
				templateObj={dialogOmcSelectedTemplateObj}
				appDateA={appDateA}
				appDateB={appDateB}
			/>



			{/* 代码编辑对话框 */}
			<DialogSimpleScriptEditor
				isOpen={isDialogScriptEditOpen}
				onCancel={onDialogScriptEditCancel}
				onOk={onDialogScriptEditOk}
				lyrParams={dialogScriptEditLyrParams}
			/>

			{/* 作图模板对话框 */}
			<DialogTemplate
				isOpen={isDialogTemplateOpen}
				onOk={onDialogTemplateOk}
				onCancel={onDialogTemplateCancel}
				loginedUser={loginedUser}
			/>



			{/* DialogLarge */}
			<DialogLarge 
				isOpen={dialogLargeIsOpen}
				onClose={onDialogLargeClose}
				loginedUser={loginedUser}
				onProductCheckChanged={onLargeDialogProductCheckChanged}
				groupA={layerGroupAArray}
				groupB={layerGroupBArray}
				isActiveGroupA={isActiveGroupA}
			/>

			{/* 新产品作图对话框 */}
			<DialogLargeOmc 
			isOpen={dialogLargeOmcIsOpen} 
			lyrParams={dialogLargeOmcLyrParams}
			onOk={onDialogLargeOmcOkClick}
			onCancel={onDialogLargeOmcCancelClick}
			onSelectROIClick={onDialogLargeOmcSelectROIClick}
			selectedROI={dialogLargeOmcSelectedRoi}
			appCurrentROI={currentRoiObject}
			appDateA={appDateA}
			appDateB={appDateB}
			loginedUser={loginedUser}
			openlayerRef={openlayerRef}
			/>

		</div>
	);
}

export default App;
